<template>
  <div>
    <el-row type="flex" justify="center" align="middle" class="licc-goods-browse-record-top-row">
      <el-row type="flex" justify="center" align="middle"  style="width:1100px;">
        <el-col class="liccc-goods-browse-record-bread">
          <router-link to="/home">首页</router-link>
          <a><b>&gt;</b>浏览记录</a>
          <span @click="deleteBorwseRecordInfosByUserId">清空</span>
        </el-col>
      </el-row>
    </el-row>

    <el-row type="flex" justify="center" align="middle" class="licc-goods-browse-record-top-row">
      <el-row type="flex" justify="center" align="middle"  style="width:1100px;">
        <el-col :span="24">
          <el-row style="width: 100%; height: 300px; line-height: 300px; background-color: #fff" v-show="recordList.length>0?false:true">
            暂无浏览记录
          </el-row>
          <el-row v-show="recordList.length>0?true:false">
            <el-col class="licc-goods-browse-record-info-el-col"
              v-for="(record, index) in recordList"
              :key="record.id">
              <el-image
                class="licc-goods-browse-record-info-el-col-img"
                fit="cover" :src="record.url"
                @click.native="goodsInfoClick(record)">
              </el-image>
              <span class="p-del" @click="deleteBrowseRecord(record)"><svg-icon icon-class="licc-browse-record"></svg-icon></span>
              <div class="licc-goods-browse-record-info-el-col-price">
                <span>￥{{record.price}}</span>
              </div>
              <div class="licc-goods-browse-record-info-el-col-name">
                <span @click="goodsInfoClick(record)">{{record.goodsName}}</span>
              </div>
              <div class="licc-goods-browse-record-info-el-col-time">
                <span>{{record.createDate}}</span>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>
<script>
  import goodsApi from "@/api/goodsList"
  export default {
    name: 'browseRecord',
    data() {
      return {
        /** 浏览记录列表 **/
        recordList:[],
        imgClassIndex:-1,
      }
    },
    created(){
      this.initPage();
    },
    methods: {
      initPage() {
        goodsApi.getBorwseRecordInfosById().then(res => {
          this.recordList = res.data;
        }).catch(() => {
          this.$notify.error({title:'错误',message:'获取浏览信息失败'});
        })
      },
      goodsInfoClick(record){
        console.log(record);
        this.$router.push({path:'/goodsInfo',query:{goodsId:record.goodId,catId:record.goodId}});
      },
      /** 清空浏览记录 **/
      deleteBorwseRecordInfosByUserId(){
        goodsApi.deleteBorwseRecordInfosByUserId().then(res => {
          this.initPage();
          this.$notify.success({title:'成功',message:'成功清除浏览记录！'});
        }).catch(() => {
          this.$notify.error({title:'失败',message:'清除浏览记录失败，请稍后再试！'});
        })
      },
      /** 删除 **/
      deleteBrowseRecord(record){
        goodsApi.deleteBorwseRecordInfosById([record.id]).then(res => {
          this.initPage();
          this.$notify.success({title:'成功',message:'成功删除！'});
        }).catch(() => {
          this.$notify.error({title:'失败',message:'删除失败，请稍后再试！'});
        })
      }
    }
  }
</script>
<style>
  .licc-goods-browse-record-top-row{
    width: 100%;
    margin-top: 20px;
  }
  .liccc-goods-browse-record-bread{
    width: 1100px;
    text-align: left;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    background-color: #fff;;
  }
  .liccc-goods-browse-record-bread a {
    color: #333;
  }
  .liccc-goods-browse-record-bread b {
    margin: 0 8px 0 5px;
  }
  .liccc-goods-browse-record-bread span{
    float: right;
    padding-right: 20px;
    cursor: pointer;
  }
  .liccc-goods-browse-record-bread span:hover{
    color: #e4393c;
  }
  .licc-goods-browse-record-info-el-col{
    position: relative;
    width: 210px;
    padding: 5px;
    float: left;
    margin: 10px 5px;
    background-color: #fff;
    transition: all 0.6s;
  }
  .licc-goods-browse-record-info-el-col:hover{
    transform: scale(1.05);
  }
  .p-del {
    width: 26px;
    height: 26px;
    font-size: 26px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: #aaa;
  }
  .p-del:hover{
    color: #e4393c;
  }
  .licc-goods-browse-record-info-el-col-img{
    width: 200px;
    height: 256px;
    overflow: hidden;
    cursor: pointer;
  }
  .licc-goods-browse-record-info-el-col-price{
    width: 100%;
    height: 30px;
    line-height: 33px;
    font-size: 18px;
    color: #333;
    overflow: hidden;
  }
  .licc-goods-browse-record-info-el-col-name{
    height: 20px;
    line-height: 20px;
    width: 100%;
    font-size: 12px;
    overflow: hidden;
    cursor: pointer;
  }
  .licc-goods-browse-record-info-el-col-name:hover{
    color: #e4393c;
  }
  .licc-goods-browse-record-info-el-col-time{
    height: 20px;
    line-height: 20px;
    width: 100%;
    font-size: 10px;
    color: #999;
    text-align: right;
    overflow: hidden;
  }
</style>
